<template>
  <div class="app-container">
    <div class="section-header">
      <div class="action-radio">
        <span class="recognition"></span>
        <span class="font-style"> 型号选择：</span>
        <el-radio-group v-model="radio">
          <el-radio label="0">所有</el-radio>

          <el-radio :label="item.dictLabel" v-for="item in equModelList"></el-radio>
          <!--    <el-radio label="KN-1211">KN-1211</el-radio>
              <el-radio label="KN-1212">KN-1212</el-radio>
              <el-radio label="KN-1214">KN-1214</el-radio> -->
        </el-radio-group>
      </div>
      <div class="action-content">
        <el-row :gutter="20">
          <el-col :span="4">
<!--            <div class="grid-content bg-purple action-card">
              <img src="../assets/homePage/five.png" style="width: 100%;" />
              <div class="actioNumberContainer">
                <div class="action-card-number">
                  {{lineNum}}
                </div>
                <div class="action-card-title">在线人数</div>
              </div>
            </div>-->
            <div class="left-container">
              <div style=" display: flex;">
                <img src="../assets/homePage/friend.png" style="width:70px;height:70px;display:flex;align-content: center;margin-left:150px;margin-top:15px"/>

                <div style="display:flex;margin-top:24px;margin-left:20px;color:#04E38A;font-size:40px;font-family:Bahnschrift; justify-content: center; align-content: center;">
                  <div class="lable-left" v-for="(item,index) in listNum" :key="index">{{item}}</div>
                  <!-- <div class="lable-left">0</div>
                  <div class="lable-left">0</div>
                  <div class="lable-left">0</div>
                   <div class="lable-left">{{countNumDevices}}</div> -->
                </div>
              </div>
              <div style="font-size:16px;margin-left:340px;margin-top:10px;width: 100px;">当前在线人数</div>
            </div>
            <!-- <div class="grid-content bg-purple action-card backcolor-yellow">

              <div class="action-card-number">56%</div>
              <div class="action-card-title">昨日使用率</div>
            </div> -->
          </el-col>
          <el-col :span="4" style="margin-left: 10vw">
            <div class="grid-content bg-purple action-card">
              <img src="../assets/homePage/one.png" style="width: 100%;" />
              <div class="actioNumberContainer">
                <div class="action-card-number">{{deviceType.total}}</div>
                <div class="action-card-title">设备总数</div>
              </div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple action-card">
              <img src="../assets/homePage/two.png" style="width: 100%;" />
              <div class="actioNumberContainer">
                <div class="action-card-number">{{deviceType.doctorCount}}</div>
                <div class="action-card-title">医生总数</div>
              </div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple action-card">
              <img src="../assets/homePage/three.png" style="width: 100%;" />
              <div class="actioNumberContainer">
                <div class="action-card-number">{{deviceType.patientCount}}</div>
                <div class="action-card-title">患者总数</div>
              </div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple action-card">
              <img src="../assets/homePage/four.png" style="width: 100%;" />
              <div class="actioNumberContainer">
                <div class="action-card-number">{{deviceType.fkCount}}</div>
                <div class="action-card-title">反馈数量</div>
              </div>
            </div>
          </el-col>

<!--          <el-col :span="4">
            <div class="grid-content bg-purple action-card">
              <img src="../assets/homePage/six.png" style="width: 100%;" />
              <div class="actioNumberContainer">
                <div class="action-card-number">
                  {{parseInt(deviceType.bDingCount / deviceType.total)? parseInt(deviceType.bDingCount / deviceType.total)*100 : '0'}}%
                </div>
                <div class="action-card-title">设备使用率</div>
              </div>
            </div>
            &lt;!&ndash; <div class="grid-content bg-purple action-card backcolor-purple">

              <div class="action-card-number">36%</div>
              <div class="action-card-title">今日使用率</div>
            </div> &ndash;&gt;
          </el-col>-->
        </el-row>
      </div>
    </div>
    <div class="data-statistics">
      <div class="data-item">
        <HomeDevicesize :modelCharts="modelCharts" ></HomeDevicesize>
        <HomeAddechart :monthAddCharts="monthAddCharts" ></HomeAddechart>
      </div>
      <div class="data-item-echarts">
        <div class="echarts-container">
          <HomeStatistics :country="country"></HomeStatistics>
        </div>
      </div>
      <div class="data-item">
        <HomeAgeechart :ageCharts="ageCharts" ></HomeAgeechart>
        <HomeCurechart :cureCharts="cureCharts" ></HomeCurechart>
      </div>
    </div>
  </div>
</template>

<script>
import IconDevice from '@/assets/icons/device.png'
import IconData from '@/assets/icons/data.png'
import IconPie from '@/assets/icons/bg-circular.png'
import HomeStatistics from '@/views/amap/homeStatistics'
import HomeDevicesize from './echartsModule/homeDevicesize'
import HomeAddechart from './echartsModule/homeAdddevice'
import HomeAgeechart from './echartsModule/HomeAgeechart'
import HomeCurechart from './echartsModule/HomeCurechart'
import {
  getBasicData,
  getChartsData,
  getCountryData,
  getOnLineCountNum
} from '@/api/homePage'
import {
  getEquModelList,
} from '@/api/kenuo/equ'

export default {
  name: "Equ",
  components: {
    HomeStatistics,
    HomeDevicesize,
    HomeAddechart,
    HomeAgeechart,
    HomeCurechart
  },
  watch:{
    radio(newVal){
      this.getBasicstatics()
    }
  },
  data() {
    return {
      lineNum:null,
      radio: '0',
      iconDevice: IconDevice,
      iconData: IconData,
      iconPie: IconPie,
      deviceType: {},
      modelCharts: [],
      monthAddCharts: [],
      ageCharts: [],
      cureCharts: [],
      country:[],
      equModelList:[],
      listNum:[],
      countNumDevices:"",
    };
  },
  created() {
    // window.onresize = () => {
    //   this.myChart1.resize()
    //   this.myChart2.resize()
    //   this.myChart3.resize()
    //   this.myChart4.resize()
    // };
    this.getEquModel();
    this.getBasicstatics();
    this.getIndexTb();
    this.getCountry();
    this.getOnLineCount();
  },
  methods: {
    //获取当前系统在线人数
    getOnLineCount(){
      getOnLineCountNum().then((res)=>{
         this.lineNum = res.data;
        this.countNumDevices= this.PrefixZero(res.data, 5)
        this.listNum=this.countNumDevices.split("")
      })
    },
    PrefixZero(num, n) {
      return (Array(n).join(0) + num).slice(-n);
    },
    //获取设备型号
    getEquModel(){
      let obj = {dictType:'eye_equ_type'}
      getEquModelList(obj).then(res=>{
        this.equModelList = res.rows
      })
    },
    getCountry(){
      getCountryData().then(res=>{
        this.country = res.data
        localStorage.setItem("country",JSON.stringify(res.data))
      })
    },
    getBasicstatics() {
      let obj = {}
      if (this.radio == '0') {
        obj = {mode:''}
      } else {
        obj = {
          mode: this.radio
        }
      }
      getBasicData(obj).then(res => {
        if (res.code == 200) {
          this.deviceType = res.data
          // let list = Object.keys(rea.data)
          // if(list.length > 0){
          //   list.map((index,item)=>{

          //   })
          // }else{
          //    this.deviceType = {

          //    }
          // }

        }
      })
    },
    getIndexTb() {
      getChartsData().then(res => {
        if (res.code == 200) {
          debugger
          this.modelCharts=  res.data.modelData;
          this.monthAddCharts=  res.data.monthData;
          this.cureCharts= res.data.csData;
          let list = [];
          if(res.data.reList.length>0){
            res.data.reList.forEach(x => {
              if(x.state==1){
                list.push(
                  {name:'正常',value:x.ct},
                );
              }
              if(x.state==2){
                list.push(
                  {name:'低压',value:x.ct==undefined||x.ct==null?0:x.ct},
                );
              }
              if(x.state==3){
                list.push(
                  {name:'高压',value:x.ct==undefined||x.ct==null?0:x.ct},
                );
              }

            })
          }
          this.ageCharts = list
          // this.ageCharts = list.filter(item=>item.value > 0)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  // margin: 10px;
  font-family: Source Han Sans CN;
  background-color: #F0F7FF;
  color: #666;
  min-height: calc(100vh - 84px);
  .section-header {
    // padding: 18px 20px 13px 20px;
    background-color: #fff;
    border: 1px solid #E3E3E5;
  }

  .recognition {
    display: inline-block;
    width: 6px;
    height: 18px;
    background: #78AEF9;
    border-radius: 2px;
    margin-right: 13px;
  }

  .font-style {
    font-size: 18px;
    font-weight: 400;
    color: #333333;
    line-height: 34px;
  }

  .action-radio {
    padding: 10px 20px 10px 20px;
  }

  .action-content {
    padding: 0 20px 10px 20px;
  }

  .action-card {
    // border: 1px solid #eee;
    // padding: 20px;
    position: relative;
    border-radius: 10px;
    color: #fff;
    text-align: left;
    font-weight: 400;

    .actioNumberContainer {
      position: absolute;
      top: 50%;
      left: 10%;
      transform: translate(0%, -50%);
    }

    .action-card-title {
      font-size: 16px;
      line-height: 23px;
      padding-top: 10px;
      text-align: center;
    }

    @media screen and (max-width:1300px) {
      .action-card-number {
        font-size: 25px;

      }
    }

    @media screen and (min-width:1300px) and (max-width:1600px) {
      .action-card-number {
        font-size: 50px;
        padding: 10px 0;
      }
    }

    @media screen and (min-width:1600px) {
      .action-card-number {
        font-size: 50px;
        padding: 15px 0;
      }
    }

    .action-card-number {
      // font-size: 50px;
      line-height: 23px;
      // padding: 15px 0;
    }

    .icon-style {
      width: 60px;
      position: absolute;
      right: 20px;
      top: 20px;
    }
  }

  .data-statistics {
    margin-top: 13px;
    display: flex;
    overflow: hidden;

    .data-item {
      flex: 1;
      height: calc(100vh - 350px);
    }

    .data-item-echarts {
      height: calc(100vh - 350px);
      flex: 2;
    }
  }

  .echarts-container {
    width: 100%;
    height: 100%;
    padding: 0 15px;

    .echarts-container-title {
      font-size: 20px;
    }

    #echart {
      width: 100%;
      height: 100%;
    }
  }



  .backcolor-blue {
    background: url("../assets/homePage/one.png") no-repeat;
    background-size: contain;

  }

  .backcolor-pink {
    // background: linear-gradient(to right, #DA68EC 0%, #FB93A0 100%);
    background: url("../assets/homePage/two.png") no-repeat;
    background-size: contain;

  }

  .backcolor-red {
    // background: linear-gradient(to right, #F56868 0%, #FD9393 100%);
    background: url("../assets/homePage/three.png") no-repeat;
    background-size: contain;

  }

  .backcolor-green {
    // background: linear-gradient(to right, #2ED376 0%, #32CC67 100%);
    background: url("../assets/homePage/four.png") no-repeat;
    background-size: contain;

  }
  .left-container {
    width: 35%;
    height: 120px;
    margin-left: -140px;
    // border: 1px solid green;
    // display: flex;
    // justify-content: space-around;
    // align-content: center;

  }
  .backcolor-yellow {
    // background: linear-gradient(to right, #FF9640 0%, #FFC690 100%);
    background: url("../assets/homePage/five.png") no-repeat;
    background-size: contain;

  }

  .backcolor-purple {
    // background: linear-gradient(to right, #4834e5 0%, #8f86d9 100%);
    background: url("../assets/homePage/six.png") no-repeat;
    background-size: contain;

  }
  .lable-left{
    border: 1px solid #04E38A;
    width: 50px;
    height: 60px;
    margin-left: 10px;
    padding-top: 8px;
    display: flex;
    background-color: #008489;
    justify-content: center;
    align-content: center;
  }
}
</style>
